<template>
	<view>
		<c-nav-bar title="注册" navStyle="white">
		</c-nav-bar>
		<!-- 状态栏间隔槽组件 -->
		<c-gap-status />
		
		<!-- 导航栏间隔槽组件 -->
		<c-gap-nav />
		<view>
			<image :src="$c.config.media+'mini/bg.png'" class="index-bg" mode=""></image>
			<image class="join-top-img" :src="$c.config.media+'mini/register/videocall-banner.png'" mode=""></image>
			<view class="vip-title">
				<view>aitaa介绍</view>
				<image :src="$c.config.media+'mini/my/vip-icon.png'"></image>
			</view>
			<view class="vip-shuoming">
				<view class="vip-shuoming-item">
					<image :src="$c.config.media+'mini/my/vip1.png'" mode=""></image>
					<view class="shuoming-item-title">
						看得更多
					</view>
				</view>
				<view class="vip-shuoming-item">
					<image :src="$c.config.media+'mini/my/vip2.png'" mode=""></image>
					<view class="shuoming-item-title">
						看得更爽
					</view>
				</view>
				<view class="vip-shuoming-item">
					<image :src="$c.config.media+'mini/my/vip3.png'" mode=""></image>
					<view class="shuoming-item-title">
						看得更久
					</view>
				</view>
				<view class="vip-shuoming-item">
					<image :src="$c.config.media+'mini/my/vip4.png'" mode=""></image>
					<view class="shuoming-item-title">
						看得更省
					</view>
				</view>
			</view>
		</view>
		<view class="join-jieshao">
			为什么要付费？
		</view>
		<view class="join-content">
			<view>
				1.aitaa致力于打造100%真实健康的平台；女性用户采用人脸识别认证，照片即真人！保证用户质量以及真实性。
			</view>
			<view>
				2.为过滤非诚意用户,避免微商、酒托、广告等骚扰，打造 纯净私密的空间，保证产品持续稳定运营。需支付 一定费用，即可永久加入
			</view>
			<view>
				3.保证绿色约会，绝不参加色情，赌博等违法行为。
			</view>
			<view>
				4.请务必确定您已满18岁，否则请勿参加。
			</view>
		</view>
	<view class="join-btn" @tap="joinShow" :style="'background-image: url('+$c.config.media+'mini/common/jiesuo.png);'">
		立即加入
	</view>
	
	<uni-popup ref="pay"  type="bottom">
		<view class="pay-wrap">
				<view class="pay-title">
					支付
				</view>
				<view class="pay-why-title">
					为什么要付费？
				</view>
				<view class="pay-why-content">
					为过滤非诚意用户,避免微商、酒托、广告等骚扰，打造 纯净私密的空间，保证产品持续稳定运营。需支付 一定费用，即可永久加入
				</view>
				<view class="pay-tips">
					如遇支付问题，请联系客服解决
				</view>
				<view class="pay-money">
					{{configData.price}}/永久
				</view>
				<view class="pay-project">
					支付总额
				</view>
				<view class="vip-kaitong" @tap="pay" :style="'background-image: url('+$c.config.media+'mini/common/jiesuo.png);'">
					立即支付
				</view>
			</view>
	</uni-popup>
	</view>
</template>

<script>
	import cGapStatus from '@/components/c-gap-status.vue';
		import cGapNav from '@/components/c-gap-nav.vue';
		import cNavBar from '@/components/c-nav-bar.vue';
	export default {
		data() {
			return {
				$c:this.$c,
				configData:{},
				param:{
					pay_type:5,
					user_id:'',
					package_id:3,
					vip_package_id:4,
					code:'',
					promoter_user_id:''
				}
			}
		},
		onLoad() {
			this.getData()
		},
		methods:{
			async getData(){
				let resConfig = await this.$c.post('/apa/config')
					console.log('===resConfig=====',resConfig)
					if(resConfig.data.man_verify_is_pay == 0){
						// 配置不需要认证
						this.$c.jump('/pages/home/home',3)
					} else {
						let userInfo  = await this.$c.post('/apa/user/myUserInfo')
						// 女号不验证
						if(userInfo.sex == 2){
							this.$c.jump('/pages/home/home',3)
						}
						let res = await this.$c.post('/apa/user/getManVerifyFee')
						this.configData = res.data
					}
			},
			joinShow(){
				this.$refs.pay.open()
			},
			pay(){
				let res; // 请求结果
				// let param = { total_amount: amount }; // 请求参数
				let data={}	// 支付参数
				// 非H5
				// #ifndef H5
				uni.getProvider({
				    service: 'oauth',
				    success: providerRes => {
				        uni.login({
				            provider: providerRes.provider,
				            success: async loginRes => {
				                // 微信支付
				                    this.param.code = loginRes.code; // 微信登录code
									
				                    // 小程序
				                    // #ifdef MP-WEIXIN
				                    this.param.payment = 'wechat_mini';
				                    data.provider = 'wxpay';
				                    // #endif
				
				                    // 请求充值参数
				                   res = await  this.$c.post('/apa/user/createBuyVipOrder',this.param);
				                if (res.status === 0) {
				                    console.log(res);
				                    return;
				                }
				                // 合并数据
				                data = Object.assign(data, res.data.mhtpInfo);
				
				                // 发起支付
				                uni.requestPayment({
				                    ...data,
				                    success: res => {
				                        let user = uni.getStorageSync('user')
										user.authentication = 1;
										uni.setStorageSync('user',user)
										this.$c.jump('/pages/home/home',3)
				                    },
				                    fail: err => {
										this.$c.show('支付失败')
				                    }
				                })
				                console.log('data', data);
				            }
				        });
				    }
				});
				// #endif
				
			}
		},
		components:{cGapStatus,cGapNav,cNavBar}
	}
</script>

<style lang="scss">
	.join-top-img{
		width: 626rpx;
		height: 378rpx;
		display: block;
		margin: 20rpx auto;
	}
.index-bg{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}	
.vip-title{
	text-align: center;
	font-size: 32rpx;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 44rpx;
	text-shadow: 0px 10rpx 24rpx rgba(247,195,138,0.21);
	background: linear-gradient(314deg, #FADFB6 0%, #FFF2E4 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin: 36rpx 0;
	image{
		width: 306rpx;
		height: 18rpx;
	}
}
.vip-shuoming{
	display: flex;
	margin: 0 48rpx;
	justify-content: space-between;
	.vip-shuoming-item{
		text-align: center;
		image{
			width: 90rpx;
			height: 90rpx;
		}
	}
	.shuoming-item-title{
		color: #FFFFFF;
		font-size: 24rpx;
		margin: 20rpx 0 12rpx;
	}
	.shuoming-item-content{
		color: #615B7B;
		font-size: 24rpx;
	}
}
.join-jieshao{
	font-size: 32rpx;
	font-weight: 600;
	color: #816FF9;
	line-height: 44rpx;
	padding: 40rpx 28rpx;
}
.join-content{
	padding: 0 28rpx;
	color: #4D4A61;
	font-size: 28rpx;
	line-height: 40rpx;
}
.join-btn{
	width: 694rpx;
	height: 100rpx;
	
	background-size: 100% 100%;
	line-height: 100rpx;
	text-align: center;
	font-size: 32rpx;
	color: #FFFFFF;
	margin: 40rpx auto 40rpx;
}

.pay-wrap{
	background-color: #221F30;
	text-align: center;
	color: #fff;
	border-radius: 30rpx 30rpx 0 0;
	padding-bottom: 110rpx;
}
.pay-title{
	padding: 32rpx 0 60rpx;
}
.pay-tips,.pay-project{
	color: #8270F9;
}
.pay-money{
	font-size: 50rpx;
	padding: 20rpx 0;
}
.vip-kaitong{
	width: 694rpx;
	height: 100rpx;
	background-size: 100% 100%;
	line-height: 100rpx;
	text-align: center;
	font-size: 32rpx;
	color: #FFFFFF;
	margin: 64rpx auto 0;
}

.pay-why-title{
	text-align: left;
	font-weight: 600;
	color: #8270F9;
	line-height: 44rpx;
	padding: 0 28rpx;
}
.pay-why-content{
	text-align: left;
	font-size: 28rpx;
	color: #4D4A61;
	line-height: 40rpx;
	padding: 40rpx 28rpx;
}
</style>